<template>
  <div class="question-container">
    <el-row align="middle">
      <el-col :span="23">
        <p class="question-content">{{ question.content }}</p>
      </el-col>
      <el-col :span="1" >
        <el-tag size="large" v-if="question.score" type="success">{{ question.score }}分</el-tag>
      </el-col>
    </el-row>
    <el-checkbox-group v-model="checkedValues"
                       class="radio-group">
      <el-checkbox
          v-for="(item, index) in question.options"
          :key="index"
          :label="item.text"
          style="border-bottom: #909399;width: 100%"
      >
        {{ item.text }}
      </el-checkbox>
    </el-checkbox-group>
  </div>
  <br/>
</template>

<script setup>
import {defineProps, defineModel} from 'vue';

const emit = defineEmits(['on-data']);
const proper = defineProps({
  question: {
    type: Object,
    required: true
  }
});

const modelValue = defineModel();

const checkedValues = ref([]);
checkedValues.value = proper.question.checkedValues;

// 数据回调
const data = reactive({
  ...proper.question,
  checkedValues
})
watch(() => checkedValues.value, (newValue) => {
  emit('on-data', data);
})

</script>

<style scoped>
.question-container {
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  margin-bottom: 5px;
}

.question-content {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #303133;
}

.radio-group {
  display: flex;
  align-content: flex-start;
  gap: 12px;
  flex-direction: column;
}
</style>
